<template>
  <div class="event-containner">
    <van-nav-bar
      class="page-nav-bar"
      left-arrow
      title="个人详情"
      @click="this.$router.back();"
    ></van-nav-bar>

    <div class="article-detail">
      <div class="article-content-card">
        <h1 class="title">编辑资料</h1>
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="userInfo.name"
              name="姓名"
              label="姓名"
              placeholder="姓名"
              :rules="[{ required: true, message: '请填写用户名' }]"
              disabled="true"
            />
            <van-field
              v-model="userInfo.username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
              disabled="true"
            />
            <van-field
              v-model="userInfo.email"
              name="邮箱"
              label="邮箱地址"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
              disabled="true"
            />
            <van-field
              v-model="userInfo.phone"
              name="手机号"
              label="手机号"
              placeholder="请填写手机号"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="userInfo.oldPassword"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"

            />
            <van-field
              v-model="userInfo.newPassword"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
   
            />
            <van-field
              v-model="userInfo.confirmPassword"
              type="password"
              name="密码"
              label="确认密码"
              placeholder="密码"
     
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>

        <div class="article-footer"></div>
        <br>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { reactive, toRefs } from 'vue';
import { getUserInfo,editorUserInfo } from '../../api/user';

export default {
  setup() {
    const state = reactive({
      userInfo: {
        username: '',
        name: '',
        phone: '',
        email: '',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    });

    getUserInfo().then((res) => {
      state.userInfo = res.data.data;
    });

    const onSubmit = () => {
      const data=   state.userInfo;
      if(data.newPassword!=data.confirmPassword){
        Toast.fail('两次密码不一样');
        return ;
      }
      editorUserInfo(data).then((res) => {
        if(res.data.code==20000){
          Toast.success('修改成功');
        }else{
          Toast.fail('修改失败,旧密码错误');
        }
    });

      
      
      
        
   
      
    };

    return {
      ...toRefs(state),
      onSubmit
    };
  }
};
</script>

<style scoped>
.article-content-card {
  padding: 24px;
  background-color: #fff;
  border-radius: 0px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  margin-top: 10px;
}

.article-source-card {
  background-color: #3f64ca;
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  display: inline-block;
}

.article-time-card {
  margin-left: 16px;
  display: inline-block;
}
.loading-wrap{
    padding: 200px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.error-wrap{
    padding: 200px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    
}
.title-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
}

.article-detail {
    
  padding: 16px;
  background-color: #fff;
}

.article-header {
     width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

.author-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f2f2;
  border-radius: 4px;
  padding: 12px 16px;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.article-date {
  font-size: 12px;
  color: #999;
}

.article-content {
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
  color: #999;
}

.article-source {
  margin-right: 16px;
}

.article-time {
  margin-left: 16px;
}
.author-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.author-card .author-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 24px;
}

.author-card .author-info .author-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.author-card .article-date {
  font-size: 16px;
  color: #999;
}
.article-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.author-card {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.author-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.author-desc {
  font-size: 14px;
  margin-bottom: 5px;
}

.article-date {
  font-size: 14px;
  color: #999;
}

</style>